<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        html, html body{
            height: 100%;
            background-color: aliceblue;
            margin: 0;
            padding: 0;
        }
        #bar-header {
            font-size: 1.5rem;
            line-height: 1.5em;
            padding: 15px 0;
            text-align: center;
        }
        #bar-footer {
            font-size: 1.5rem;
        }
        #content {
            margin: auto;
            height: 75%;
            background-color: #d7ddf1;
        }
    </style>
</head>
<body>
    <div id="bar-header">顶部</div>
    <div id="content"></div>
    <div id="bar-footer">
        <div class="size-bar" id="panel-page">
            PAGE:
        </div>
        <div class="size-bar" id="panel-mode">
            SCENE:
            <button>test1</button>
            <button>test2</button>
        </div>
        <div class="size-bar" id="panel-scale">
            SCALE: 
            <button>1</button>
            <button>1.5</button>
            <button>2</button>
        </div>
        <div id="debug"></div>
    </div>
    <script src="./src/main.ts"></script>
    <script>
        let pics = [
            { name: 'pic1', url: './examplepic/1_01.jpg' },
            { name: 'pic2', url: './examplepic/1_02.jpg' },
            { name: 'pic3', url: './examplepic/1_03.jpg' },
            { name: 'pic4', url: './examplepic/1_04.jpg' },
            { name: 'pic5', url: './examplepic/1_05.jpg' },
        ];

        test1();

        // local script
        const panelPage = document.getElementById('panel-page');
        panelPage.innerHTML += (() => pics.map((v,i)=> `<button>${i+1}</button>`).join(''))();
        panelPage.addEventListener('touchend', (e) => {
            imagePetting.jumpTo(e.target.innerText);
        });
        document.getElementById('panel-scale').addEventListener('touchend', (e) => {
            const target = e.target;
            const txt = +target.innerText;
            if (txt != NaN) imagePetting.zoom(parseFloat(txt));
        });
        document.getElementById('panel-mode').addEventListener('touchend', (e) => {
            const target = e.target;
            const txt = target.innerText;
            if (txt == 'test1') test1();
            else test2();
        });

        function test1(){
            imagePetting.render(
                document.getElementById('content'), 
                {
                    images: pics.map(v => v.url), 
                    sizeWrap: ['100%', '100%'],
                    sizeImage: ['100%', '100%', '20px'],
                    listenerJumpIndex(index) {
                        document.getElementById('bar-header').innerText = pics[index].name;
                    }
                }
            );
        }

        function test2(){
            imagePetting.render(
                document.getElementById('content'), 
                {
                    images: pics.map(v => v.url), 
                    sizeWrap: ['100%', '360px'],
                    sizeImage: ['30%', '350px', '10%'],
                    listenerJumpIndex(index) {
                        document.getElementById('bar-header').innerText = pics[index].name;
                    }
                }
            );
        }
    </script>
</body>
</html>